<!-- home -->
<template>
  <div id="top">
    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      show-action
      shape="round"
    >
      <div slot="action">搜索</div>
    </van-search>
  </div>
</template>

<script>
import { judgeDeviceType } from "util/devices";

export default {
  name: "HomeTop",
  components: {},
  data() {
    return {
      show: false,
      keywords: "",
      value: ""
    };
  },
  computed: {},
  mounted() {
    this.$nextTick(() => {
      let inputs = document.querySelectorAll("input");
      for (let i = 0; i < inputs.length; i++) {
        this.listenKey(inputs[i]);
      }
    });
  },
  methods: {
    // eslint-disable-next-line no-unused-vars
    listenKey(input) {
      if (judgeDeviceType.isAndroid) {
        let originHeight =
          document.documentElement.clientHeight || document.body.clientHeight;

        window.addEventListener(
          "resize",
          () => {
            let resizeHeight =
              document.documentElement.clientHeight ||
              document.body.clientHeight;
            if (originHeight < resizeHeight) {
              this.$parent.$refs.tab_bar.$el.style.visibility = "visible";
            } else {
              this.$parent.$refs.tab_bar.$el.style.visibility = "hidden";
              this.origin = this.$parent.$el.querySelector(
                ".main_content"
              ).style.height;
              this.$parent.$el.querySelector(".main_content").style.height =
                "2000px";
            }
            originHeight = resizeHeight;
          },
          false
        );
      }
    },
  },
  destroyed() {
  }
};
</script>
<style lang="stylus" scoped>
#top
  position: fixed;
  top: 0
  left: 0
  overflow hidden
  width 100%
  z-index:10
  .custom_icon
    font-size 30px;

#keywords
  border-bottom 1px solid #cccccc
  width 100%
  font-size 16px
</style>
